<template>
  <div class="index">
    <header>
      <div class="icon"></div>
      <span>各地配送中心电话</span>
    </header>

    <div class="btn">
      <div
        class="btn-item"
        v-for="item in DataList"
        :key="item.id"
        @click="CityData(item.id)"
      >
        {{ item.name }}
      </div>
    </div>

    <div class="cell">
      如需配送请拨打当地配送电话，部分地区不支持配送，其他疑问，请致电客服
    </div>

    <div class="otherCell">
      <div class="text">其他配送中心电话</div>
    </div>

    <!-- 城市 -->
    <div class="City">
      <div
        class="City-item"
        v-for="a1 in cityData"
        :key="a1.id"
        @click="dialsChange(a1.id)"
      >
        <div class="ht" @click="dials = true">
          <div class="cityName">{{ a1.title }}</div>
          <div
            v-if="dials != -1 && a1.id == dials"
            class="icon2"
            @click.stop="noShowDialis"
          ></div>
          <div
            v-else-if="dials != -1 && a1.id != dials"
            class="icon"
            @click.stop="noShowDialis"
          ></div>
          <div v-else class="icon" @click.stop="noShowDialis"></div>
        </div>
        <!-- 这个标签是为了不报警告 v-for和v-if不建议在同一个标签 -->
        <!-- 控制电话的隐藏与显示 -->
        <el-collapse-transition>
          <!-- -->
          <div class="v-if" v-show="a1.id == dials">
            <div
              class="Dials"
              v-for="(a2, index) in a1.data"
              :key="a2 + index"
              :data-name="a1.id"
            >
              <div
                class="Dials-item"
                v-for="(a3, index) in a2"
                :key="a3 + index"
              >
                <div class="naem" v-for="(val, k) in a3" :key="k">{{ k }}</div>
                <div class="cellNumber" v-for="val in a3" :key="val">
                  {{ val }}
                </div>
                <div class="go">拨号</div>
              </div>
            </div>
          </div>
        </el-collapse-transition>
      </div>
    </div>

    <footer>
      <div class="text">返回</div>
    </footer>
    <!-- <span>{{ cityData }}</span> -->
  </div>
</template>

<script>
import Data from './1.json'
export default {
  data() {
    return {
      // 所有数据
      DataList: Data,
      // 需要用到的数据
      cityData: [],

      // 控制城市电话的显示
      dials: -1
    }
  },
  computed: {},
  mounted() {
    // 需要渲染的数据
    this.CityData()
  },
  methods: {
    // 渲染什么数据
    CityData(id) {
      this.dials = -1
      // 默认渲染 城市
      this.DataList.find((item, index) => {
        this.cityData = item.data
      })
      // console.log(this.cityData)
      // 点击按钮渲染
      this.DataList.forEach((item, index) => {
        if (item.id == id) {
          this.cityData = item.data
        }
      })
    },
    // 控制电话的隐藏与显示
    dialsChange(id) {
      this.dials = id // 显示电话
      // this.show = true
    },
    noShowDialis() {
      console.log(1)
      this.dials = -1
    }
  }
}
</script>

<style scoped lang="less">
// 假设这个是浏览器标签
.index {
  max-width: 350px; /*手机匹配最大值*/
  min-width: 320px; /*手机匹配最小值*/
  height: 650px;
  color: #000;
  background-color: #f8ebcf;
  font: 16px Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB,
    '\5B8B\4F53', sans-serif;
  margin: 0 auto;
  overflow-x: hidden; /*裁剪内容不提供滚动条*/
  -webkit-tap-highlight-color: transparent; /*点击高亮我们需要清除清除  设置为transparent 完成透明*/
  -webkit-font-smoothing: antialiased; /* CSS3 抗锯齿形 让文字显示的更加清晰 */
}

.index {
  position: relative;
  // 头部
  header {
    position: relative;
    display: flex;
    justify-content: center;
    height: 35px;
    background: #edf0ed;
    text-align: center;
    line-height: 35px;

    .icon {
      position: absolute;
      top: 13px;
      left: 25px;
      width: 10px;
      height: 10px;
      border-top: 2px solid rgb(0, 0, 0);
      border-left: 2px solid rgb(0, 0, 0);
      transform: rotate(-45deg);
    }
  }

  // 按钮
  .btn {
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    padding: 0 15px;
    margin-top: 25px;

    .btn-item {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 65px;
      height: 32px;
      margin: 5px 5px;
      color: #fff;
      background: red;
      border-radius: 5px;
      box-shadow: 1px 1px 5px 1px rgba(9, 9, 9, 0.6);
      cursor: pointer;
    }
  }

  // 致电
  .cell {
    padding: 10px 20px;
    font-size: 12px;
  }

  // 其他致电
  .otherCell {
    // padding: 10px 20px;
    font-size: 18px;
    color: red;
    border-bottom: 1px solid rgb(113, 113, 113);

    .text {
      padding-left: 20px;
    }
  }

  // 城市
  .City {
    padding: 0 20px 0 20px;
    margin-top: 30px;

    .City-item {
      .ht {
        display: flex;
        justify-content: space-between;
        margin: 10px 0;
        cursor: pointer;

        .cityName {
          font-size: 16px;
          // font-weight: 700;
        }

        .icon {
          width: 12px;
          height: 12px;
          border-right: 2px solid rgb(113, 111, 111);
          border-bottom: 2px solid rgb(113, 111, 111);
          transform: rotate(45deg);
        }

        .icon2 {
          width: 12px;
          height: 12px;
          border-left: 2px solid rgb(113, 111, 111);
          border-bottom: 2px solid rgb(113, 111, 111);
          transform: rotate(135deg);
        }
      }
      // 拨号
      .Dials {
        border: 1px solid #ccc;
        border-radius: 10px;
      }

      .Dials-item {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;

        width: 300px;
        height: 38px;
        font-size: 14px;

        .cellNumber {
          position: absolute;
          left: 100px;
          top: 10px;
        }
        .naem {
          margin-left: 15px;
        }

        .go {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 50px;
          height: 23px;
          margin-right: 15px;
          border: 1px solid red;
          border-radius: 30px;
        }
      }
    }
  }

  // 底部
  footer {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 45px;
    color: #fff;
    background: red;
  }
}
</style>
